<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>模板字符串的应用</title>
        <style>
            body {
                padding: 50px 0 0 300px;
                font-size: 22px;
            }
            ul {
                padding: 0;
            }
            p {
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <p>学生信息表</p>
        <ul id="list">
            <li style="list-style: none">信息加载中……</li>
        </ul>
    </body>
    <script>
        const all = [
            {
                username: "XiaoMing",
                age: 18,
                sex: "male",
            },
            {
                username: "ZhangSan",
                age: 28,
                sex: "male",
            },
            {
                username: "Lucy",
                age: 20,
                sex: "female",
            },
        ];
        var list = document.getElementById("list");
        var allSting = "";
        for (let i = 0; i < all.length; i++) {
            allSting += `<li>我叫${all[i].username},性别${all[i].sex},今年${all[i].age}</li>`;
        }
        list.innerHTML = allSting;
    </script>
</html>
